<template>
	<view>
		<view v-if="!isEdit">
			<view class="state_area between_layout">
				<view class="state">审核状态：{{ruleForm.state|auditStatusList}}</view>
				<image v-if="ruleForm.state==0" class="state_pic" src="@/static/company/success_icon.png">
				</image>
				<image v-if="ruleForm.state==1" class="state_pic" src="@/static/company/spend_icon.png">
				</image>
				<image v-if="ruleForm.state==2" class="state_pic" src="@/static/company/fail_icon.png"></image>
			</view>
			<view v-if="ruleForm.state==2" class="reason_area">
				审核失败原因：{{ ruleForm.auditOpinion ? ruleForm.auditOpinion : "无" }}
			</view>
			<view class="form-area">
				<view class="info-item">
					<view class="info-label">企业名称：</view>
					<view>{{ruleForm.companyName}}</view>
				</view>
				<view class="info-item">
					<view class="info-label">注册地址：</view>
					<view>{{ruleForm.registeredAddress}}</view>
				</view>
				<view class="info-item">
					<view class="info-label">统一社会信用代码：</view>
					<view>{{ruleForm.unifySocialCreditCode}}</view>
				</view>
				<view class="info-item">
					<view class="info-label">联系人姓名：</view>
					<view>{{ruleForm.linkName}}</view>
				</view>
				<view class="info-item">
					<view class="info-label">企业所属行业：</view>
					<view>{{ruleForm.industryName}}</view>
				</view>
				<view class="info-item">
					<view class="info-label">联系人手机号：</view>
					<view>{{ruleForm.linkPhone}}</view>
				</view>
				<view class="info-item">
					<view class="info-label">企业法人姓名：</view>
					<view>{{ruleForm.principalName}}</view>
				</view>
				<view class="info-item">
					<view class="info-label">企业法人手机号：</view>
					<view>{{ruleForm.principalPhone}}</view>
				</view>
				<view class="info-item">
					<view class="info-label">企业资质：</view>
					<view>{{ruleForm.qualification}}</view>
				</view>
				<view class="info-item">
					<view class="info-label">电子邮箱：</view>
					<view>{{ruleForm.email}}</view>
				</view>
				<view class="info-item">
					<view class="info-label">所属区域：</view>
					<view>{{ruleForm.provinceName+ruleForm.cityName+ruleForm.districtName}}</view>
				</view>
				<view class="info-item">
					<view class="info-label">详细地址：</view>
					<view>{{ruleForm.detailedAddress}}</view>
				</view>
				<view class="info-item">
					<view class="info-label">单位简介：</view>
					<view>{{ruleForm.intro}}</view>
				</view>
				<view class="info-item">
					<view class="info-label">营业执照：</view>
					<u-image :showLoading="true" :src="ruleForm.businessLicenseUrl" :radius="10" width="100px"
						height="100px" @click="clickPic(ruleForm.businessLicenseUrl)"></u-image>
				</view>
				<u-button shape='circle' v-if="!companyId&&ruleForm.state!=1" class="sub-btn" type="primary"
					@click="isEdit=true">编辑</u-button>
			</view>
		</view>
		<view v-if="isEdit" class="form-area">
			<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
			<u--form labelPosition="top" labelWidth="200" :model="ruleForm" :rules="rules" ref="uForm">
				<u-form-item required label="企业名称:" prop="companyName">
					<u--input placeholder="请输入企业名称" maxlength="30" v-model="ruleForm.companyName"></u--input>
				</u-form-item>
				<u-form-item required label="注册地址:" prop="registeredAddress">
					<u--input placeholder="请输入注册地址" maxlength="30" v-model="ruleForm.registeredAddress"></u--input>
				</u-form-item>
				<u-form-item required label="统一社会信用代码:" prop="unifySocialCreditCode">
					<u--input placeholder="请输入统一社会信用代码" maxlength="18"
						v-model="ruleForm.unifySocialCreditCode"></u--input>
				</u-form-item>
				<u-form-item required label="联系人姓名:" prop="linkName">
					<u--input placeholder="请输入联系人姓名" maxlength="10" v-model="ruleForm.linkName"></u--input>
				</u-form-item>
				<u-form-item required label="企业所属行业:" prop="industryName">
					<view style="width: 100%;" @click="openPicker">
						<u--input disabled disabledColor="#ffffff" style="pointer-events: none;" placeholder="请选择企业所属行业"
							v-model="ruleForm.industryName" suffixIcon="arrow-down"
							suffixIconStyle="color: #909399"></u--input>
					</view>
					<u-picker v-if="showPicker" :defaultIndex="defaultIndex" @cancel="showPicker=false"
						@confirm="confirmPicker" :show="showPicker" :columns="[industryDict]"
						keyName="dictLabel"></u-picker>
				</u-form-item>
				<u-form-item required label="联系人手机号:" prop="linkPhone">
					<u--input placeholder="请输入联系人手机号" maxlength="11" v-model="ruleForm.linkPhone"></u--input>
				</u-form-item>
				<u-form-item required label="企业法人姓名:" prop="principalName">
					<u--input placeholder="请输入企业法人姓名" maxlength="10" v-model="ruleForm.principalName"></u--input>
				</u-form-item>
				<u-form-item required label="企业法人手机号:" prop="principalPhone">
					<u--input placeholder="请输入企业法人手机号" maxlength="11" v-model="ruleForm.principalPhone"></u--input>
				</u-form-item>
				<u-form-item required label="企业资质:" prop="qualificationArr">
					<u-checkbox-group style="margin-top: 20rpx;" v-model="ruleForm.qualificationArr" shape="square"
						@change="changeCheckbox">
						<u-checkbox :customStyle="{marginRight: '10px'}" v-for="(item, index) in qyzzDict" :key="index"
							:label="item.dictLabel" :name="item.dictLabel">
						</u-checkbox>
					</u-checkbox-group>
				</u-form-item>
				<u-form-item required label="电子邮箱:" prop="email">
					<u--input placeholder="请输入电子邮箱" maxlength="50" v-model="ruleForm.email"></u--input>
				</u-form-item>
				<u-form-item required label="所属区域:" prop="districtName">
					<view style="width: 100%;" class="between_layout">
						<view @click="openArea(0)">
							<u--input disabled disabledColor="#ffffff" style="pointer-events: none;" placeholder="请选择省"
								v-model="ruleForm.provinceName" suffixIcon="arrow-down"
								suffixIconStyle="color: #909399"></u--input>
						</view>
						<view @click="openArea(1)">
							<u--input disabled disabledColor="#ffffff" style="pointer-events: none;margin: 0 20rpx;"
								placeholder="请选择市" v-model="ruleForm.cityName" suffixIcon="arrow-down"
								suffixIconStyle="color: #909399"></u--input>
						</view>
						<view @click="openArea(2)">
							<u--input disabled disabledColor="#ffffff" style="pointer-events: none;" placeholder="请选择区"
								v-model="ruleForm.districtName" suffixIcon="arrow-down"
								suffixIconStyle="color: #909399"></u--input>
						</view>
					</view>
					<u-picker v-if="areaPicker" :defaultIndex="defaultValue" @cancel="areaPicker=false"
						@confirm="confirmAreaPicker" :show="areaPicker" :columns="areaColumns"
						keyName="areaName"></u-picker>
				</u-form-item>
				<u-form-item required label="详细地址:" prop="detailedAddress">
					<u--input placeholder="请输入详细地址" maxlength="50" v-model="ruleForm.detailedAddress"></u--input>
				</u-form-item>
				<u-form-item required label="单位简介:" prop="intro">
					<u--textarea :height="200" v-model="ruleForm.intro" maxlength="1000" count
						placeholder="请输入单位简介"></u--textarea>
				</u-form-item>
				<u-form-item required label="营业执照:">
					<view class="form-box">
						<lsj-upload v-if="showUpload" height="200rpx" ref="lsjUpload" :option="option" :toBase="false"
							:size="30" :count="1" formats='pdf,doc,docx' :debug="false" :instantly="true"
							:distinct="true" @uploadEnd="onuploadEnd" @progress="onprogre" @changeFile="onChange">
							<image style="width: 200rpx;height: 200rpx;" src="@/static/company/addFile.png" />
						</lsj-upload>
						<view>
							<view v-for="(item,index) in files.values()" :key="index">
								<view class="between_layout">
									<view>{{item.name}}</view>
									<view style="flex-shrink: 0;margin-left: 20rpx;color: #19be6b;">
										大小：{{(item.size / (1024 * 1024)).toFixed(2) + "MB"}}</view>
								</view>
								<view style="margin: 16rpx 0;">
									<u-line-progress :percentage="item.progress"
										activeColor="#1C6DE2"></u-line-progress>
								</view>
								<view class="between_layout">
									<view>状态：{{item.type=='success'?'上传成功':(item.type=='fail'?'上传失败':'上传中..')}}</view>
									<view class="end_layout">
										<u-button style="margin-right: 20rpx;" @click="preview(item)" type="success"
											size="mini" text="预览"></u-button>
										<u-button @click="clear(item.name)" type="error" size="mini"
											text="删除"></u-button>
									</view>
								</view>
							</view>
						</view>
						<view class="pop-tips"><text style="color: #1C6DE2;font-size: 28rpx;margin-right: 6rpx;"
								class="cuIcon-infofill"></text>请上传pdf，png，jpg，jpge文件</view>
					</view>
				</u-form-item>
			</u--form>
			<u-button shape='circle' class="sub-btn" type="primary" @click="submit">提交</u-button>
			<u-loading-page :loading="loading" bg-color="rgba(0, 0, 0, 0.3)"></u-loading-page>
		</view>
	</view>
</template>

<script>
	import {
		getDicts,
		linkage,
		addCompanyAuth,
		updateCompanyAuth,
		getCompanyDetail,
		auditCompanyInfo
	} from '@/utils/api.js'
	import filePicker from '@/components/uni-file-picker/uni-file-picker.vue'
	export default {
		components: {
			filePicker
		},
		data() {
			return {
				showUpload: true,
				// 上传接口参数
				option: {
					url: getApp().globalData.fileUrl, // 该地址非真实路径，需替换为你项目自己的接口地址
					name: 'file',
					header: {
						"Authorization": uni.getStorageSync('access_token'),
						"clientid": "e5cd7e4891bf95d1d19206ce24a7b32e"
					}
				},
				// 文件回显列表
				files: new Map(),
				loading: false,
				areaPicker: false,
				areaColumns: [],
				companyId: null,
				ruleForm: {
					companyName: '',
					registeredAddress: '',
					unifySocialCreditCode: '',
					linkName: '',
					industryId: '',
					industryName: '',
					linkPhone: '',
					principalName: '',
					principalPhone: '',
					qualification: '',
					qualificationNames: '',
					qualificationArr: [],
					email: '',
					provinceId: '320000000000',
					provinceName: '江苏省',
					cityId: '320600000000',
					cityName: "南通市",
					districtId: '320671000000',
					districtName: '南通经济技术开发区',
					detailedAddress: '',
					intro: '',
					businessLicense: '',
					businessLicenseUrl: '',
					state: null
				},
				rules: {
					companyName: [{
						required: true,
						message: '请输入企业名称',
						trigger: 'blur'
					}],
					registeredAddress: [{
						required: true,
						message: '请输入注册地址',
						trigger: 'blur'
					}],
					unifySocialCreditCode: [{
						required: true,
						message: '请输入统一社会信用代码',
						trigger: 'blur'
					}],
					linkName: [{
						required: true,
						message: '请输入联系人姓名',
						trigger: 'blur'
					}],
					industryName: [{
						required: true,
						message: '请选择企业所属行业',
						trigger: 'change',
					}, ],
					linkPhone: [{
						required: true,
						pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
						message: "请输入正确的手机号码",
						trigger: "blur"
					}],
					principalName: [{
						required: true,
						message: '请输入企业法人姓名',
						trigger: 'blur'
					}],
					principalPhone: [{
						required: true,
						pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
						message: "请输入正确的手机号码",
						trigger: "blur"
					}],
					qualificationArr: [{
						type: 'array',
						required: true,
						message: '请选择企业资质',
						trigger: 'change',
					}, ],
					email: [{
						required: true,
						type: "email",
						message: "请输入正确的邮箱地址",
						trigger: "blur"
					}],
					districtName: [{
						required: true,
						message: '请选择所属区域',
						trigger: 'change',
					}, ],
					detailedAddress: [{
						required: true,
						message: '请输入详细地址',
						trigger: 'blur'
					}],
					intro: [{
						required: true,
						message: '请输入单位简介',
						trigger: 'blur'
					}, ],
					businessLicense: [{
						required: true,
						message: '请上传营业执照',
						trigger: 'change',
					}, ]
				},
				defaultIndex: [0],
				industryDict: [],
				qyzzDict: [],
				showPicker: false,
				areaType: '',
				defaultValue: [0],
				isEdit: true,
				siftList: [{
					name: 'province',
					list: []
				}, {
					name: 'city',
					list: []
				}, {
					name: 'district',
					list: []
				}]
			};
		},
		onLoad(option) {
			this.init()
			if (option.id) {
				this.companyId = option.id
				this.getAuditInfo(option.id)
			} else {
				this.getInfo()
			}
		},
		methods: {
			getInfo() {
				this.loading = true
				getCompanyDetail().then(res => {
					if (res.data) {
						this.ruleForm = res.data
						this.ruleForm.qualificationArr = this.ruleForm.qualification.split(",")
						this.files = [{
							name: this.ruleForm.businessLicense,
							url: this.ruleForm.businessLicenseUrl
						}]
						this.isEdit = false
						this.loading = false
					} else {
						this.isEdit = true
						this.loading = false
					}
				})
			},
			getAuditInfo(id) {
				this.isEdit = false
				this.loading = true
				auditCompanyInfo(id).then(res => {
					if (res.data) {
						this.ruleForm = res.data
						this.ruleForm.qualificationArr = this.ruleForm.qualification.split(",")
						this.files = [{
							name: this.ruleForm.businessLicense,
							url: this.ruleForm.businessLicenseUrl
						}]
						this.loading = false
					} else {
						this.loading = false
					}
				})
			},
			clickPic(item) {
				uni.previewImage({
					current: 0,
					urls: [item]
				});
			},
			init() {
				//行业
				getDicts('qysshy').then(res => {
					this.industryDict = res.data
				})
				//企业资质
				getDicts('qyzz').then(res => {
					this.qyzzDict = res.data
				})
				//获取省
				linkage(0).then(res => {
					this.siftList[0].list = res.data
				})
				//获取市
				linkage(320000000000).then(res => {
					this.siftList[1].list = res.data
				})
				//获取区
				linkage(320600000000).then(res => {
					this.siftList[2].list = res.data
				})
			},
			//打开省市区选择
			openArea(index) {
				this.areaType = index
				this.areaColumns = []
				this.areaColumns.push(this.siftList[index].list)
				var curIndex = this.siftList[index].list.findIndex((value) => value.areaName == this.ruleForm[this
					.siftList[this.areaType].name + 'Name'])
				this.defaultValue[0] = curIndex == -1 ? 0 : curIndex
				this.areaPicker = true
			},
			//选择省市区
			confirmAreaPicker(e) {
				if (this.areaType == 0) {
					linkage(e.value[0].id).then(res => {
						this.siftList[1].list = res.data
					})
					this.ruleForm.cityId = ""
					this.ruleForm.cityName = ""
					this.ruleForm.districtId = ""
					this.ruleForm.districtName = ""
				}
				if (this.areaType == 1) {
					linkage(e.value[0].id).then(res => {
						this.siftList[2].list = res.data
					})
					this.ruleForm.districtId = ""
					this.ruleForm.districtName = ""
				}
				if (this.areaType == 2) {
					this.$refs.uForm.validateField('districtName')
				}
				this.ruleForm[this.siftList[this.areaType].name + 'Id'] = e.value[0].id
				this.ruleForm[this.siftList[this.areaType].name + 'Name'] = e.value[0].areaName
				this.areaPicker = false
			},
			//打开选择行业
			openPicker() {
				var curIndex = this.industryDict.findIndex((value) => value.dictLabel == this.ruleForm.industryName)
				this.defaultIndex[0] = curIndex == -1 ? 0 : curIndex
				this.showPicker = true
			},
			//选择行业
			confirmPicker(e) {
				this.ruleForm.industryName = e.value[0].dictLabel
				this.ruleForm.industryId = e.value[0].dictLabel
				this.showPicker = false
			},
			//选择企业资质
			changeCheckbox(e) {
				this.ruleForm.qualification = e.toString()
			},
			onuploadEnd(item, childId) {
				if (item.type == 'success') {
					this.showUpload = false
				}
				this.files.set(item.name, item);
				this.$forceUpdate();
			},
			onprogre(item, childId) {
				this.files.set(item.name, item);
				this.$forceUpdate();
			},
			onChange(files, childId) {
				this.files = files;
				this.$forceUpdate();
			},
			clear(name) {
				this.showUpload = true
				this.files = new Map()
			},
			submit() {
				this.$refs.uForm.validate().then(res => {
					const values = [...this.files.values()];
					if (values.length == 0) {
						uni.showToast({
							title: '请上传营业执照！',
							icon: 'none',
							duration: 2000
						})
					} else {
						this.ruleForm.businessLicenseUrl = JSON.parse(values[0].responseText).data.url
						this.ruleForm.businessLicense = JSON.parse(values[0].responseText).data.ossId
						uni.showLoading({
							title: '提交中'
						});
						if (this.ruleForm.baseId) {
							updateCompanyAuth(this.ruleForm).then(res => {
								if (res.code == 200) {
									uni.hideLoading()
									uni.showToast({
										title: '提交成功！',
										icon: 'success',
										duration: 2000
									})
									this.getInfo()
								} else {
									uni.showToast({
										title: res.msg,
										icon: 'none',
										duration: 2000
									})
								}
							})
						} else {
							addCompanyAuth(this.ruleForm).then(res => {
								if (res.code == 200) {
									uni.hideLoading()
									uni.showToast({
										title: '提交成功！',
										icon: 'success',
										duration: 2000
									})
									this.getInfo()
								} else {
									uni.showToast({
										title: res.msg,
										icon: 'none',
										duration: 2000
									})
								}
							})
						}
					}					
				}).catch(errors => {
					uni.$u.toast('请完善必填项！')
				})
			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
	};
</script>
<style lang="scss" scoped>
	.state_area {
		background-color: #FFFFFF;
		padding: 30rpx;
		margin-top: 30rpx;

		.state {
			font-size: 30rpx;
			font-weight: bold;
			color: #F2270C;
		}

		.state_pic {
			width: 110rpx;
			height: 96rpx;
		}
	}

	.reason_area {
		font-size: 26rpx;
		color: #F2270C;
		padding: 26rpx 32rpx;
		background: rgba(242, 39, 12, 0.1);
	}

	.form-area {
		background-color: #fff;
		margin-top: 30rpx;
		padding: 10rpx 30rpx 30rpx 30rpx;

		.info-item {
			display: flex;
			justify-content: flex-start;
			align-items: flex-start;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
			margin: 15rpx 0;

			.info-label {
				color: #999999;
				flex-shrink: 0;
			}
		}
	}
</style>